<template>
	<view>


		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<view class="swiper-item uni-bg-red">
					<!-- <image :src="baseurl+item.advImg"></image> -->
					<image :src="item.advImg"></image>
				</view>
			</swiper-item>
		</swiper>



		<view class="input-wrapper">
			<uni-search-bar class="search"  placeholder="输入关键字查找电影"  @click="gotomoviesearch"/>
			
		</view>



		<view class="item" v-for="item in movielist" :key="item.id" @click="gotomoviedetail(item.id)">
			<view class="left">
				<!-- <image class="leftimg" :src="baseurl+item.cover" mode="" /> -->
				<image class="leftimg" :src="item.cover" mode="" />
			</view>

			<view class="middle">
				<view><text class="dym">{{item.name}}</text> </view>
				<view>上映时间:{{item.playDate}} </view>
				<view>观众评分:<text class="grade">{{item.score}}分</text> </view>

				<view>{{item.language}} | {{item.duration}}分钟</view>
			</view>

			<view class="right">
				<button class="gp">购票</button>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		movielbList,
		moviefilmList,
		filmpreviewList
	} from "../../api/movieService.js";
	import{baseurl} from '../../api/request.js';

	import {
		movielblist,
		moviesylist
	} from "../../mock/movie.js";

	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [],
				baseurl,
				movielist: []
			}
		},

		async created() {
			// let res = await movielbList()
			// //看电影 广告轮播接口
			// console.log(res);
			// this.bannerList = res.data.rows;


			let res = await movielbList()
			// //看电影 广告轮播接口
			console.log(res);
			if (res.code == 200) {
				this.bannerList = res.data.rows;
			} else {

				this.bannerList = movielblist().rows;
			}




			// let res1 = await moviefilmList()
			// //看电影 查询影片信息列表
			// console.log(res1);
			// res1.data.rows.splice(0, 1)
			// this.movielist = res1.data.rows



			let res1 = await moviefilmList()
			//看电影 查询影片信息列表
			console.log(res1);

			if (res1.code == 200) {
				this.movielist = res1.data.rows;
			} else {

				this.movielist = moviesylist().rows;
			}




			let res2 = await filmpreviewList()
			//看电影 查询电影预告信息列表
			console.log(res2);


		},
		methods: {
			gotomoviedetail(id) {
				uni.navigateTo({
					url: "/pages/movie/moviedetail/moviedetail?id="+id
				})
			},
			gotomoviesearch() {
				uni.navigateTo({
					url: "/pages/movie/moviesearch/moviesearch"
				})
			}
		}
	}
</script>

<style>
	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	swiper-item image {
		width: 100%;
	
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.input-wrapper {
		width: 100%;
		margin-top: 30rpx;
		
		
	}

	.uni-input {
		height: 50rpx;
		border: 1px solid black;
		width: 90%;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}

	/* .search{
	font-size: 10px;
	width: 20%;
	height: 50rpx;
}

.search text{
	padding-top: 10rpx;
} */





	.item {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-left: 20rpx;
		margin-top: 30rpx;
	}

	.left {
		flex: 1;
	}

	.leftimg {
		width: 100%;
		height: 100%;
	}

	.middle {
		flex: 3;
		min-width: 0;
		margin-left: 20rpx;
	}

	.dym {
		font-size: 18px;
		font-weight: 700;
	}

	/* .dylx{
  background-color: #D2D6DC;
  color: white;
} */
	/* .yany{
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
} */
	.right {
		flex: 1;

	}

	.gp {
		margin-top: 50%;
		line-height: 50rpx;
		height: 50rpx;
		width: 130rpx;
		border: 1px solid #ff5f16;
		color: #ff5f16;
		font-size: 12px;
		text-align: center;
		border-radius: 2px;
	}


	/* .dhl{
  display: flex;
  justify-content: space-around;
} */
	/* .zzry{
  flex: 1;
 margin-left: 15%;
}
.jjsy{
  flex: 1;
  margin-left: 10%;
} */
</style>